<template>
  <view>
    <view @click="handlerGoList(item)" class="cate-item" v-if="!isMore">
      <image class="img" :src="item.picurl" mode=""></image>
      <view class="cate-name">
        {{item.name}}
      </view>
      <view class="update-time">
        ·&nbsp;<uni-dateformat :date="item.updateTime" :threshold="[60000,31104000000]"></uni-dateformat>更新
      </view>
    </view>
    <view class="cate-item" @click="goTabBarCate" v-else>
      <view class="cate-name more">
        <uni-icons type="more-filled" size="30" color="white"></uni-icons>
        <view class="much">
          更多
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  defineProps({
    isMore: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  })

  //事件回调组
  // 点击了专题精选中某张图片
  function handlerGoList(cate) {
    const {
      _id,
      name
    } = cate;
    uni.navigateTo({
      url: '/subpkg/papers_list/papers_list?id=' + _id + '&name=' + name
    })
  }

  //点击更多卡片
  function goTabBarCate() {
    uni.switchTab({
      url: '/pages/cate/cate'
    })
  }
</script>

<style lang="scss" scoped>
  .cate-item {
    height: 341rpx;
    position: relative;
    border-radius: 10px;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }

    .cate-name {
      width: 100%;
      position: absolute;
      bottom: 0%;
      left: 0%;
      height: 68rpx;
      background-color: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(20px);
      font-size: 24rpx;
      color: $text-color-mask;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 最后一张加载更多
    .cate-name.more {
      height: 100%;
      flex-direction: column;

    }

    .update-time {
      position: absolute;
      top: 0%;
      left: 0%;
      background-color: rgba(216, 138, 117, 0.4);
      backdrop-filter: blur(20px);
      color: white;
      font-size: 15rpx;
      line-height: 25rpx;
      padding: 0 10rpx;
    }
  }
</style>